<script setup>
import { updateAadmin } from '@/api/admin';
import useAdminStore from '@/stores/admin';
import { useTokenStore } from '@/stores/token';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const useAdmin = useAdminStore()
const useToken=useTokenStore()
const route=useRouter()
// 管理员表单模型
const adminModel=ref({
    name:"",
    old_pwd:"",
    new_pwd:""
})


// 修改管理员信息
const updateAdmin = async () => {
    adminModel.value.id=useAdmin.admin.id
    let admin = await updateAadmin(adminModel.value);
    
    if (admin.data.code == 0) {
        ElMessage.success(admin.data.msg+"，请重新登录")
        useAdmin.removeAdmin()
        useToken.removeToken()
        route.push("login")
    } else {
        ElMessage.error(admin.data.msg)
    }
}

// 重置表单
const resetForm=()=>{
    adminModel.value.name="";
    adminModel.value.old_pwd="";
    adminModel.value.new_pwd=""
}

// 渲染管理员信息
adminModel.value.name=useAdmin.admin.name
</script>


<template>
    <div class="container">
        <el-card style="border-radius:15px">
            <!-- 表单 -->
            <el-form  status-icon :model="adminModel" class="user-form">
                <!-- 头像 -->
                <el-form-item>
                    <el-avatar :size="130" src="https://ali-cdn.educoder.net/images/avatars/User/768127?t=1732017449" />
                </el-form-item>
                <el-form-item label="新用户名" >
                    <el-input v-model="adminModel.name"  />
                </el-form-item>
                <el-form-item label="旧密码">
                    <el-input type="password" autocomplete="off" v-model="adminModel.old_pwd" />
                </el-form-item>
                <el-form-item label="新密码" >
                     <el-input  type="password" autocomplete="off" v-model="adminModel.new_pwd"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateAdmin">
                        修改
                    </el-button>
                    <el-button type="primary" @click="resetForm">
                        重置
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>


<style lang="scss" scoped>
.container{
    width: 65%;
    margin: 0 auto;
    margin-top: 50px;
}
.user-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
</style>